<script setup lang="ts">
import { onMounted, reactive } from 'vue'
import { useSettingStore } from '@/utils/stores/modules/setting'
import { useTheme } from '@/utils/theme'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

const settingStore = useSettingStore()
const { initTheme } = useTheme()

const config = reactive({
    autoInsertSpace: true,
})

onMounted(() => {
    // 初始化主题
    initTheme(settingStore.themeColor)
    // 初始化暗黑模式
    if (settingStore.darkMode) {
        document.documentElement.classList.add('dark')
    }
})
</script>

<template>
    <el-config-provider
     :locale="zhCn" :button="config" :value-on-clear="() => null" :empty-values="[undefined, null]">
        <router-view v-slot="{ Component, route }">
            <component :is="Component" :key="route.path" />
        </router-view>
    </el-config-provider>
</template>

<style>
body {
    background-color: #f0f2f5;
}
</style>